<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!--
Copyright 2017 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<html>
<head>
<title>Credit Card Upload Test - Form with shipping address, leads to credit card form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
  <form id="checkout" name="checkout" action="/credit_card_upload_form_address_and_cc.html" method="post">
    <div>Name: <input type="text" name="name_address" autocomplete="name"></div>
    <div>Address: <input type="text" name="address" autocomplete="address-line1"></div>
    <div>City: <input type="text" name="city" autocomplete="address-level2"></div>
    <div>State: <input type="text" name="state" autocomplete="address-level1"></div>
    <div>Zip: <input type="text" name="zip" autocomplete="postal-code"></div>
    <div>Country: <input type="text" name="country" autocomplete="country-name"></div>
    <hr>
    <button id="fill_form" type="button">Fill entire form with default values</button>
    <button id="conflicting_name" type="button">Fill a different name than the next form</button>
    <button id="conflicting_street_address" type="button">Fill a different street address than the next form</button>
    <button id="conflicting_postal_code" type="button">Fill a different postal code than the next form</button>
    <button id="submit" type="submit">Submit</button>
  </form>
<script type="text/javascript">
  document.getElementById("fill_form").addEventListener(
      "click",
      function() {
        document.getElementsByName("name_address")[0].value = "John Smith";
        document.getElementsByName("address")[0].value = "123 Testing St.";
        document.getElementsByName("city")[0].value = "Mountain View";
        document.getElementsByName("state")[0].value = "California";
        document.getElementsByName("zip")[0].value = "94043";
        document.getElementsByName("country")[0].value = "US";
      });

  document.getElementById("conflicting_name").addEventListener(
      "click",
      function() {
        document.getElementsByName("name_address")[0].value = "Chrome Guy";
      });

  document.getElementById("conflicting_street_address").addEventListener(
      "click",
      function() {
        document.getElementsByName("address")[0].value = "456 Chromium Ave.";
      });

  document.getElementById("conflicting_postal_code").addEventListener(
      "click",
      function() {
        document.getElementsByName("address")[0].value = "456 Chromium Ave.";
        document.getElementsByName("city")[0].value = "San Francisco";
        document.getElementsByName("zip")[0].value = "94105";
      });
</script>
</body>
</html>
